<PageCard>

# useInteractions

A hook to merge or compose interaction event handlers together,
preserving memoization.

```js
import {useInteractions} from '@floating-ui/react';
```

<ShowFor packages={['react-dom']}>

<PackageLimited>@floating-ui/react only</PackageLimited>

</ShowFor>

</PageCard>

Interaction Hooks like `useHover(){:js}` and `useFocus(){:js}` do
two things: they set up Effects inside the Hook that work on
their own, and return event handlers intended to be passed to the
elements to add their functionality.

## Usage

`useInteractions(){:js}` accepts an array of the values returned
from interaction Hooks, merging their event handlers into prop
getters used for rendering:

```js /hover/ /focus/
import {
  useFloating,
  useHover,
  useFocus,
  useInteractions,
} from '@floating-ui/react';

function App() {
  const {context} = useFloating();

  const hover = useHover(context);
  const focus = useFocus(context);

  const {getReferenceProps, getFloatingProps} = useInteractions([
    hover,
    focus,
  ]);
}
```

<Notice title="Conditional interactions">
  Don't conditionally pass values into the interactions array if you don't
  want one of the interactions to be enabled. This is because each Hook also has Effects that
  register independent event handlers globally, among other side effects.

Instead, use the `enabled{:.key}` option that each Hook has -- it
simultaneously disables all Effects _and_ event handler props so
the Hook is fully inert.

</Notice>

## Return value

```ts
interface UseInteractionsReturn {
  getReferenceProps(
    userProps?: React.HTMLProps<Element>,
  ): Record<string, unknown>;
  getFloatingProps(
    userProps?: React.HTMLProps<HTMLElement>,
  ): Record<string, unknown>;
  getItemProps(
    userProps?: React.HTMLProps<HTMLElement>,
  ): Record<string, unknown>;
}
```

The Hook returns two core prop getters, one for the reference
element and one for the floating element. These prop getters
should be spread onto the elements:

```js
<>
  <div ref={refs.setReference} {...getReferenceProps()} />
  <div
    ref={refs.setFloating}
    style={floatingStyles}
    {...getFloatingProps()}
  />
</>
```

All event handlers you pass in should be done so through the prop
getter, not the element itself:

```js
<div
  ref={refs.setReference}
  {...getReferenceProps({
    onClick: () => console.log('clicked'),
    onFocus: () => console.log('focused'),
  })}
/>
```

This is because your handler may be either overwritten or
overwrite one of the Hooks' handlers. More event handlers may
also be added in future versions.

## `getItemProps{:.const}`

A third prop getter is returned for item elements when dealing
with a list inside the floating element, which is not required
for all types of floating elements. See
[`useRole`](/docs/useRole#role) for more information on this prop
getter for listbox (e.g. select or combobox) or menu roles.

{/* prettier-ignore */}
```js /getItemProps/
const {
  getReferenceProps, 
  getFloatingProps, 
  getItemProps
} = useInteractions([]);
```
